<template>
    <div class="materialReview-materialComparison-box"  :key="materialReviewExaminationKey">
        <div class="materialComparison-left">
            <div class="left-directory-list-box">
                <a-spin size="large" :spinning="spinning" :key="spinningKey">
                    <div v-for="(item,index) in directoryList" :key="index">
                        <a-tooltip placement="topRight">
                            <template slot="title">
                                <span>{{ item.ml.fmlmc }}</span>
                            </template>
                            <span class="directory-list-fmlmc">{{ item.ml.fmlmc }}</span>
                        </a-tooltip>
                        <div v-for="(trem,tIndex) in item.wjList" :key="tIndex" style="margin-bottom: 10px;" 
                        class="file-for-v-box-t"
                        :class="itemIndexTremTindex == 'item'+index+'trem'+tIndex?'itemIndexTremTindex-select-box':''" @click="selectDirectory(index,tIndex,'left')">
                            <span class="tips-text-v directory-text-bz" v-if="trem.fcljsqh == '1'">补正</span>
                            <span class="tips-text-v directory-text-yd" v-if="trem.fydzt=='已读'">已读</span>
                            <span class="tips-text-v directory-text-wd" v-else>未读</span>
                            <a >{{ trem.fclmc }}</a><!--文件名称-->
                            <!-- @click="downloadClick(trem)" -->
                        </div>
                    </div>
                </a-spin>
            </div>
            <div class="right-preview-box" :id="rightPreviewBoxId" style="position: relative;">
                <div id="wholeWatermarkId" ref="wholeWatermarkRef0"></div>
                <!-- <button @click="fetchAndAddWatermark">获取PDF并添加水印</button> -->
                <div :id="rightPreviewTopYjBoxId" style="text-align: left;">
                    <div v-if="!currentRow.isDisabled" style="display: flex;flex-direction: column;justify-content: center;padding: 10px 10px 5px 10px !important;">
                        <div style="padding: 3px 0;text-align: center;" v-if="currentRow.fhjmc !== '材料审查复核' && currentRow.fhjmc !== '方案制定'">
                            <span>审查结论：</span>
                            <a-radio-group v-model="previewFileData.ml.fywscyj" @change="singleOpinionChange($event,'fywscyj',previewFileData)" >
                                <a-radio value="通过">通过</a-radio>
                                <a-radio value="不通过">不通过</a-radio>
                                <a-radio value="整改后复查">整改后复查</a-radio>
                            </a-radio-group>
                        </div>
                        <div v-if="!previewFileData.ml.fywscyj">
                            <span v-if="previewFileData.ml.fbcscyj">上一次技术审查情况：{{ previewFileData.ml.fbcscyj }}</span>
                        </div>
                        <div v-if="previewFileData.ml.fywscyj && (currentRow.fhjmc == '材料审查复核' || currentRow.fhjmc == '方案制定')">
                            {{ previewFileData.ml.fywscyj }}
                        </div>
                        <handlingOpinionsVisual
                        v-if="previewFileData.ml.fywscyj == '有意见' && currentRow.fhjmc !== '材料审查复核' && currentRow.fhjmc !== '方案制定'"
                        :key="handlingOpinionsVisualKey"
                        :parameterData="{opinion:previewFileData.ml.fscyj,valueData:{id:previewFileData.ml.id,valueKey:'fscyj'},opinionType:previewFileData.ml.fmlmc,formItemTitle:'审评意见'}" 
                        @getInputOpinion="getInputOpinion" />
                    </div>
                    <div style="text-align: center;padding: 10px;" v-else>{{ previewFileData.ml.fscyj }}</div>
                </div>
                <a-spin tip="正在加载中..." :spinning="leftIframeSpinning">
                    <iframe :id="rightPreviewIframeId" :src="pdfSrc" :width="rightPreviewBoxW" :height="rightPreviewBoxH"  v-if="pdfSrc" :title="previewFileData.trem.fclmc" :name="previewFileData.trem.fclmc"></iframe>
                    <div v-else style="display: flex;justify-content: center;height: 100%;padding-top: 50px;">
                        <a-empty description="暂无文件或文件发生错误！"/>
                    </div>
                </a-spin>
                
            </div>
        </div>
        <div class="materialComparison-right">
            <div class="process-handling-card">
                <a-tabs type="card" v-model:activeKey="activeKey" @change="tabPaneChange">
                    <a-tab-pane key="材料对比" tab="材料对比"></a-tab-pane>
                    <a-tab-pane key="申请信息" tab="事项信息"></a-tab-pane>
                    <!-- <a-tab-pane key="环节流转记录" tab="流转记录"></a-tab-pane> -->
                </a-tabs>
            </div>
            <div style="width: 100%;" class="materialComparison-content-box" v-if="activeKey == '材料对比'">
                <div class="left-preview-box" style="position: relative;">
                    <div id="wholeWatermarkId" ref="wholeWatermarkRef"></div>
                    <a-spin tip="正在加载中..." :spinning="rightIframeSpinning">
                        <iframe :id="previewRightIframeId" :src="rightPdfSrc" :width="previewRightBoxW" :height="previewRightBoxH"  v-if="rightPdfSrc" :title="previewRightFileData.trem.fclmc" :name="previewRightFileData.trem.fclmc"></iframe>
                        <div v-else style="display: flex;justify-content: center;height: 100%;padding-top: 50px;">
                            <a-empty description="暂无文件或文件发生错误！"/>
                        </div>
                    </a-spin>
                </div>
                <div class="right-directory-list-box">
                    <a-spin size="large" :spinning="spinning" :key="spinningKey">
                        <div v-for="(item,index) in directoryList" :key="index">
                            <span class="directory-list-fmlmc">{{ item.ml.fmlmc }}</span><!--目录-->
                            <div v-for="(trem,tIndex) in item.wjList" :key="tIndex" style="margin-bottom: 10px;" 
                            class="file-for-v-box-t"
                            :class="itemIndexTremTindexRight == 'item'+index+'trem'+tIndex?'itemIndexTremTindex-select-box':''" @click="selectDirectory(index,tIndex,'right')">
                                <span class="tips-text-v directory-text-bz" v-if="trem.fcljsqh == '1'">补正</span>
                                <span class="tips-text-v directory-text-yd" v-if="trem.fydzt=='已读'">已读</span>
                                <span class="tips-text-v directory-text-wd" v-else>未读</span>
                                <a >{{ trem.fclmc }}</a><!--文件名称-->
                                <!-- @click="downloadClick(trem)" -->
                            </div>
                        </div>
                    </a-spin>
                </div>
            </div>
            <div style="width: 100%;" class="materialComparison-content-box" v-show="activeKey == '申请信息'">
                <a-spin size="large" :spinning="modalSpinningPrice" tip="正在加载中...">
                    <eventSet
                        :key="eventSetKey" 
                        ref="examinationEventSetRef" 
                        @updatedSuccess="eventupdatedSuccess"
                    />
                </a-spin>
            </div>
            <!-- <div class="material-review-tabs" v-if="!currentRow.isTopTabs">
                <a-tabs type="card" v-model:activeKey="activeKey" @change="tabPaneChange">
                    <a-tab-pane key="材料审查" tab="材料审查"></a-tab-pane>
                    <a-tab-pane key="申请信息" tab="事项信息"></a-tab-pane>
                    <a-tab-pane key="环节流转记录" tab="流转记录"></a-tab-pane>
                </a-tabs>
            </div>
            <div class="material-review-content" 
            :style="{height: currentRow.isTopTabs?'calc(100vh - '+136+'px)':'calc(100vh - '+145+'px)',boxShadow:currentRow.isTopTabs?'': '0px 0px 12px 0px #5ca3e5'}">
                <div v-show="activeKey == '材料审查'">
                    <a-spin size="large" :spinning="spinning" :key="spinningKey">
                        <div class="review-table" :key="directoryKey" v-if="directoryList.length">
                            <table border bordercolor="#d9d9d9" style="width: 100%; " >
                                <tr>
                                    <th>材料目录</th>
                                    <th>接收材料</th>
                                    <th style="min-width:150px;" v-if="isFcljsqh">补正材料</th>
                                    <th>技术审查情况</th>
                                </tr>
                                <tr v-for="(item,index) in directoryList" :key="index" class="file-list-v-examination">
                                    <td style="width: 15%;text-align:center;">{{ item.ml.fmlmc }}</td>
                                    <td >
                                        <div class="file-for-box">
                                            <div class="file-for-v" v-for="(trem,tIndex) in item.wjList" :key="tIndex" v-if="trem.fcljsqh == '0'">
                                                <div class="file-icon-box">
                                                    <div class="right-box">
                                                        <span
                                                        style="
                                                        padding: 0 3px;
                                                        color: #fff;
                                                        background: #18d118;
                                                        border-radius: 3px;
                                                        "
                                                        :style="{background:trem.fydzt=='已读'?'#18d118':'red'}">{{ trem.fydzt }}</span>
                                                        
                                                    </div>
                                                </div>
                                                <a @click="downloadClick(trem)" class="name-fclmc-text">{{ trem.fclmc }}</a>
                                                <a-icon style="padding: 0 3px;" class="eye-icon-v" type="eye" @click="viewClick(trem)" v-if="trem.fclmc.indexOf('.pdf') !== -1"/>
                                            </div>
                                        </div>
                                    </td>
                                    <td v-if="isFcljsqh">
                                        <div class="file-for-v" v-for="(trem,tIndex) in item.wjList" :key="tIndex" v-if="trem.fcljsqh == '1'">
                                            <div class="file-icon-box">
                                                <div class="right-box">
                                                    <span
                                                    style="
                                                    padding: 0 3px;
                                                    color: #fff;
                                                    background: #18d118;
                                                    border-radius: 3px;
                                                    "
                                                    :style="{background:trem.fydzt=='已读'?'#18d118':'red'}">{{ trem.fydzt }}</span>
                                                    
                                                </div>
                                            </div>
                                            <a @click="downloadClick(trem)" class="name-fclmc-text">{{ trem.fclmc }}</a>
                                            <a-icon class="eye-icon-v" type="eye" @click="viewClick(trem)" v-if="trem.fclmc.indexOf('.pdf') !== -1"/>
                                        </div>
                                    </td>
                                    <td style="width: 300px;text-align: center;">
                                        <div v-if="!currentRow.isDisabled">
                                            <div style="padding: 3px 0;" v-if="currentRow.fhjmc !== '材料审查复核' && currentRow.fhjmc !== '方案制定'">
                                                <a-radio-group v-model="item.ml.fywscyj" @change="singleOpinionChange($event,'fywscyj',item)" >
                                                    <a-radio value="无意见">无意见</a-radio>
                                                    <a-radio value="有意见">有意见</a-radio>
                                                </a-radio-group>
                                            </div>
                                            <div v-if="!item.ml.fywscyj">
                                                <span>上一次技术审查情况：{{ item.ml.fbcscyj }}</span>
                                            </div>
                                            <div v-if="item.ml.fywscyj && (currentRow.fhjmc == '材料审查复核' || currentRow.fhjmc == '方案制定')">
                                                {{ item.ml.fywscyj }}
                                            </div>
                                            <handlingOpinionsVisual
                                            v-if="item.ml.fywscyj == '有意见' && currentRow.fhjmc !== '材料审查复核' && currentRow.fhjmc !== '方案制定'"
                                            :key="handlingOpinionsVisualKey"
                                            :parameterData="{opinion:item.ml.fscyj,valueData:{id:item.ml.id,valueKey:'fscyj'},opinionType:item.ml.fmlmc}" 
                                            @getInputOpinion="getInputOpinion" />
                                        </div>
                                        <span v-else>{{ item.ml.fscyj }}</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="!spinning && !directoryList.length" style="display: flex;justify-content: center;margin: 20px 0;">
                            <a-empty />
                        </div>
                    </a-spin>
                </div>
                <div v-show="activeKey == '申请信息'  || activeKey == '环节流转记录'" style="height: 100%;overflow: hidden;">
                    <a-spin size="large" :spinning="modalSpinningPrice" tip="正在加载中...">
                        <eventSet
                            :key="eventSetKey" 
                            ref="examinationEventSetRef" 
                            @updatedSuccess="eventupdatedSuccess"
                        />
                    </a-spin>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
import { 
    spcyqueryQyWjclml,
    spcyupdateMl,
    spcyoneKeyUpdateClmlBkck,
    spcyoneKeyUpdateClmlKck,
    spcyoneKeyUpdateClmlWsc,
    spcyoneKeyUpdateClmlYsc,
    spcydownloadQysqclFile,
    spcygetSummaryOpinionInScyj,
    spcyoneTouchYesScyj,
    spcyoneTouchNoScyj,
    spcydownloadQysqclById,
 } from './service/index'
 import YchConstant from "@/api/YchConstant";
 import blobType from '@/common/blobType'
 import eventSet from '../taskAcceptance/eventSet.vue'
import CommpStep from '../../../../../components/commp-step/commpStep.vue';
import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib'
import PreviewPdf from './materialComparison'
import store from '@/store'
import moment from 'moment';
export default {
    components:{
    eventSet,
    CommpStep
},
    props:{

    },
    data(){
        return{
            modalSpinningPrice:true,
            activeKey:'',
            directoryList:[],
            currentRow:{},
            directoryKey:null,
            auditStatus:'',
            visibleState:'',
            allOpinion:'',
            handlingOpinionsVisualKey:null,
            eventSetKey:null,
            allStatusKey:null,
            materialReviewExaminationKey:null,
            spinning:false,
            spinningKey:null,
            isFcljsqh:false,

            pdfSrc: '',
            previewFileId:'',
            iframeId:'iframeId'+new Date().getTime(),

            pdf: null,
            page: null,
            canvasContext: null,
            scale: 1.5, // 根据需要设置缩放比例
            realname:store.getters.userInfo.realname,//获取用户名
            iframeName:'',
            rightPreviewBoxId:'rightPreviewBoxId'+new Date().getTime(),
            rightPreviewTopYjBoxId:'rightPreviewTopYjBoxId'+new Date().getTime(),
            rightPreviewIframeId:'rightPreviewIframeId'+new Date().getTime(),
            rightPreviewBoxW:'100%',
            rightPreviewBoxH:window.innerHeight - 148+'px',
            previewFileData:{
                ml:{},
                index:0,
                trem:{},
                tIndex:0,
            },
            itemIndexTremTindex:'item0trem0',
            itemIndexTremTindexRight:'item0trem0',
            topYjBoxKey:null,
            rightPdfSrc:'',
            rightIframeSpinning:false,
            leftIframeSpinning:false,
            previewRightFileData:{
                ml:{},
                index:0,
                trem:{},
                tIndex:0,
            },
            previewRightIframeId:'previewRightIframeId'+new Date().getTime(),
            previewRightBoxW:'100%',
            previewRightBoxH:window.innerHeight - 178+'px',
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            this.previewFileData={
                ml:{},
                index:0,
                trem:{},
                tIndex:0,
            }
            this.previewRightFileData = {
                ml:{},
                index:0,
                trem:{},
                tIndex:0,
            }
            ////console.log('我是材料审查对比',row)
            this.currentRow = row
            this.currentRow.reserveBottom = row.reserveBottom?row.reserveBottom:0
            this.spinning = true
            spcyqueryQyWjclml({sqsxid:row.sqsxid}).then(res=>{
                if(res.code == 200){
                    // this.$message.success(res.message)
                    ////console.log(res.result)
                    this.directoryList = res.result
                    
                    // 
                    res.result.forEach((item,index)=>{
                        if(item.wjList && item.wjList.length){
                            item.wjList.forEach(trem=>{
                                if(trem.fcljsqh == '1'){
                                    this.isFcljsqh = true
                                    return
                                }
                                
                            })
                            if(this.previewFileData.index == index){
                                this.previewFileData.ml = item.ml
                                this.previewFileData.trem = item.wjList[this.previewFileData.tIndex]
                                ////console.log('我获取了什么？',this.previewFileData)
                                this.topYjBoxKey = Date.now()
                            }
                            if(this.previewRightFileData.index == index){
                                this.previewRightFileData.ml = item.ml
                                this.previewRightFileData.trem = item.wjList[this.previewRightFileData.tIndex]
                                ////console.log('我获取了什么？',this.previewRightFileData)
                            }
                        }else{
                            this.isFcljsqh = false
                            return
                        }
                    })
                    this.getElementData()
                    this.fetchAndAddWatermark(this.previewFileData.trem.id,'left')
                    this.fetchAndAddWatermark(this.previewRightFileData.trem.id,'right')
                    // this.pdfSrc = bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/spcy/downloadQysqclFile?id='+this.previewFileId
                    let fscztArr = []
                    let fkckztArr = []
                    let fscyjArr = []
                    res.result.forEach(item => {
                        fscztArr.push(item.ml.fsczt)
                        fkckztArr.push(item.ml.fkckzt)
                        fscyjArr.push(item.ml.fscyj)
                    });
                    
                    if(fscztArr.indexOf('已审核') == -1){
                        this.auditStatus = '未审核'
                    }else if(fscztArr.indexOf('已审核') !== -1 && fscztArr.indexOf('未审核') !== -1){
                        this.auditStatus = ''
                    }
                    if(fscztArr.indexOf('未审核') == -1) {
                        this.auditStatus = '已审核'
                    }else if(fscztArr.indexOf('已审核') !== -1 && fscztArr.indexOf('未审核') !== -1){
                        this.auditStatus = ''
                    }
                    if(fkckztArr.indexOf('允许') == -1) {
                        this.visibleState = '不允许'
                    }else if(fkckztArr.indexOf('允许') !== -1 && fkckztArr.indexOf('不允许') !== -1){
                        this.visibleState = ''
                    }
                    if(fkckztArr.indexOf('不允许') == -1) {
                        this.visibleState = '允许'
                    }else if(fkckztArr.indexOf('允许') !== -1 && fkckztArr.indexOf('不允许') !== -1){
                        this.visibleState = ''
                    }
                    if(fkckztArr.indexOf('无意见') == -1 && fkckztArr.indexOf('有意见') !== -1) {
                        this.allOpinion = '有意见'
                    }else if(fkckztArr.indexOf('有意见') !== -1 && fkckztArr.indexOf('无意见') !== -1){
                        this.allOpinion = ''
                    }else{
                        this.allOpinion = ''
                    }
                    if(fkckztArr.indexOf('有意见') == -1&& fkckztArr.indexOf('无意见') !== -1) {
                        this.allOpinion = '无意见'
                    }else if(fkckztArr.indexOf('有意见') !== -1 && fkckztArr.indexOf('无意见') !== -1){
                        this.allOpinion = ''
                    }else{
                        this.allOpinion = ''
                    }
                    
                }else{
                    this.$message.warning(res.message)
                }
                this.spinning = false
            })
            if(!row.noFirstLoad){
                this.activeKey = '材料对比'
                if(!row.isRefresh){
                    this.directoryKey = Date.now()
                    this.handlingOpinionsVisualKey = Date.now()
                    this.allStatusKey = Date.now()
                    this.materialReviewExaminationKey = Date.now()
                }
                
            }
            
        },
        getElementData(){
            this.$nextTick(()=>{
                setTimeout(()=>{
                    let rightPreviewBox = document.getElementById(this.rightPreviewBoxId)
                    let rightPreviewTopYjBoxId = document.getElementById(this.rightPreviewTopYjBoxId)
                    ////console.log(rightPreviewBox.offsetWidth)
                    this.rightPreviewBoxW = rightPreviewBox.offsetWidth+'px'
                    this.rightPreviewBoxH = (rightPreviewBox.offsetHeight - 5 - (rightPreviewTopYjBoxId.offsetHeight))+'px'
                    ////console.log('顶部高度',rightPreviewTopYjBoxId.offsetHeight)
                    ////console.log('总体',rightPreviewBox.offsetHeight)
                    ////console.log('底部',this.rightPreviewBoxH)
                    // let previewRightIframe = document.getElementById(this.previewRightIframeId)
                    // this.previewRightBoxW = previewRightIframe.offsetWidth+'px'
                    // this.previewRightBoxH = (previewRightIframe.offsetHeight - 10)+'px'
            //         const iframe = document.querySelector('iframe');
            //         const iframeContent = iframe.contentDocument || iframe.contentWindow.document;

            //         // 创建canvas元素
            //         const canvas = document.createElement('canvas');
            //         const ctx = canvas.getContext('2d');

            //         // 将iframe内容绘制到canvas上
            //         canvas.width = iframeContent.body.offsetWidth;
            //         canvas.height = iframeContent.body.offsetHeight;
            //         ctx.drawImage(iframeContent.body, 0, 0, canvas.width, canvas.height);

            //         // 添加水印
            //         const watermark = 'WATERMARK';
            //         ctx.font = '30px Arial';
            //         ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; // 半透明黑色
            //         ctx.fillText(watermark, canvas.width - ctx.measureText(watermark).width - 10, canvas.height - 20);

            //         // 将带水印的canvas内容转换回图片（或PDF，如果需要的话）
            //         // 注意：这里只是一个简化的例子，转换回图片或PDF可能更复杂
            //         const watermarkedImageData = canvas.toDataURL('image/png');

            //         // 将水印图像应用到iframe（仅作为示例，可能需要其他逻辑）
            //         const img = new Image();
            //         img.src = watermarkedImageData;
            //         iframeContent.body.appendChild(img);
                },200)
            })
        },
        changeListData(row,positionParams){
            ////console.log('我得到的positionParams0',positionParams)
            spcyqueryQyWjclml({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    // this.$message.success(res.message)
                    ////console.log(res.result)
                    this.directoryList = res.result
                    // 
                    res.result.forEach((item,index)=>{
                        if(item.wjList && item.wjList.length){
                            item.wjList.forEach(trem=>{
                                if(trem.fcljsqh == '1'){
                                    this.isFcljsqh = true
                                    return
                                }
                                
                            })
                            if(row && row.index == index){
                                if(positionParams == 'left'){
                                    this.previewFileData.ml = item.ml
                                    this.previewFileData.trem = item.wjList[row.tIndex]
                                    this.topYjBoxKey = Date.now()
                                }else if(positionParams == 'right'){
                                    this.previewRightFileData.ml = item.ml
                                    this.previewRightFileData.trem = item.wjList[row.tIndex]
                                    //console.log('我进来了right2',this.previewRightFileData)
                                }
                            }
                        }else{
                            this.isFcljsqh = false
                            return
                        }
                    })
                    if(positionParams == 'left'){
                        this.getElementData()
                    }
                    
                    ////console.log('我在文件传值这里positionParams2',positionParams)
                    if(positionParams == 'left'){
                        this.fetchAndAddWatermark(this.previewFileData.trem.id,positionParams)
                    }else if(positionParams == 'right'){
                        this.fetchAndAddWatermark(this.previewRightFileData.trem.id,positionParams)
                    }
                    
                    
                }else{
                    this.$message.warning(res.message)
                }
                this.spinning = false
            })
        },
        //选择左侧文件
        selectDirectory(index,tIndex,positionParams){
            // ////console.log('我在文件传值这里positionParams3',positionParams)
            this.changeListData({index,tIndex},positionParams)
            if(positionParams == 'left'){
                this.itemIndexTremTindex = 'item'+index+'trem'+tIndex
            }else if(positionParams == 'right'){
                this.itemIndexTremTindexRight = 'item'+index+'trem'+tIndex
                //console.log('我进来了right1',this.itemIndexTremTindexRight)
                //console.log('我进来了right1',{index,tIndex},positionParams)
                
            }
            
        },
        eventupdatedSuccess(){
            this.modalSpinningPrice = false
        },
        onChangeExamine(val){
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '已审核'){
                spcyoneKeyUpdateClmlYsc(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '未审核'){
                spcyoneKeyUpdateClmlWsc(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }


        },
        onChangeVisible(val){
            ////console.log(val)
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '允许'){
                spcyoneKeyUpdateClmlKck(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '不允许'){
                spcyoneKeyUpdateClmlBkck(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }
            

        },
        onChangeOpinionVisible(val){
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '有意见'){
                spcyoneTouchYesScyj(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '无意见'){
                spcyoneTouchNoScyj(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }
        },
        onChangeRowExamine(val,item){
            spcyupdateMl({fsczt:val.target.value,id:item.ml.id}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        onChangeRowVisible(val,item){
            spcyupdateMl({fkckzt:val.target.value,id:item.ml.id}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        tabPaneChange(val){
            if(val == '申请信息'  || val == '环节流转记录'){
                this.$nextTick(()=>{
                    setTimeout(()=>{
                        // this.eventSetKey = Date.now()
                        this.$refs.examinationEventSetRef.getDatas({...this.currentRow,tabPaneActiveKey:val,noFirstLoad:true,borderisFalse:true,isFalsePosition:true,isReadOnly:true,})
                        // this.$refs.examinationEventSetRef.$refs.dealWithRef.tabPaneChange(val)
                        this.modalSpinningPrice = true
                    })
                })
                
            }
        },
        viewClick(trem){
            ////console.log(trem)
            window.open(
                bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/spcy/downloadQysqclFile?id='+trem.id
            )
            this.getData({...this.currentRow,noFirstLoad:true})
        },
        downloadClick(trem){
            ////console.log(trem)
            let fwjlx = trem.fclmc.slice(trem.fclmc.lastIndexOf('.'))
            var that = this
            this.DownloadTemplateLoading = true
            var fileName = trem.fclmc
            let param = { id:trem.id}
            
            spcydownloadQysqclById(param).then((data) => {
                this.DownloadTemplateLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                    let index = blobType.suffix.indexOf(fwjlx)
                    let url = window.URL.createObjectURL(new Blob([data], { type:blobType.type[index] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                    this.getData({...this.currentRow,noFirstLoad:true})
                // }
            })
        },
        getInputOpinion(val,data){
            ////console.log(data)
            let datas = {id:data.id}
            datas[data.valueKey] = val
            spcyupdateMl(datas).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.$emit('modifySuccess')
                }else{
                    this.$message.warning(res.message)
                    this.changeListData({index:this.previewFileData.index.index,tIndex:this.previewFileData.tIndex},'no')
                }
                
            })
        },
        singleOpinionChange(val,name,item){
            ////console.log(item)
            let datas = {id:item.ml.id}
            datas[name] = val.target.value
            spcyupdateMl(datas).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.$emit('modifySuccess')
                }else{
                    this.$message.warning(res.message)
                    this.changeListData({index:this.previewFileData.index,tIndex:this.previewFileData.tIndex},'no')
                }
                
                // this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        async fetchAndAddWatermark(id,positionParams) {
            
            ////console.log('我在文件传值这里positionParams1',positionParams)
            if(positionParams == 'left'){
                this.$nextTick(()=>{
                    this.$AddWatermarkHandle(undefined,'wholeWatermarkRef0')
                })
                this.leftIframeSpinning = true
                this.pdfSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/spcy/downloadQysqclFile?id='+id
                this.leftIframeSpinning = false
            }else if(positionParams == 'right'){
                this.$nextTick(()=>{
                    this.$AddWatermarkHandle()
                })
                this.rightIframeSpinning = true
                this.rightPdfSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/spcy/downloadQysqclFile?id='+id
                this.rightIframeSpinning = false
            }
            return
            //console.log('我获取到了什么文件流？3')
            try {
                //console.log('我获取到了什么文件流？2')
                // 从接口获取PDF文件流
                if(!id){
                    this.leftIframeSpinning = false
                    this.rightIframeSpinning = false
                    return
                }
                const data = await spcydownloadQysqclFile({id:id})
                //console.log('我获取到了什么文件流？1',data)
                const realnameDate = this.realname+moment().format('YYYY年MM月DD日')
                ////console.log('水印文本',realnameDate)
                this.previewPdfConstructor(
                    {
                    blob: data,
                    docTitle: 'window.open docTitle',
                    isAddWatermark: true, // 是否需要添加水印
                    watermark: { // watermark必填 里面可以不填
                        type: 'canvas',
                        text: realnameDate
                    }
                },positionParams
                )
                // const previewPdf = new PreviewPdf({
                //     blob: data,
                //     docTitle: 'window.open docTitle',
                //     isAddWatermark: true, // 是否需要添加水印
                //     watermark: { // watermark必填 里面可以不填
                //         type: 'text',
                //         text: realnameDate
                //     }
                // })
                // previewPdf.getResultUrl().then(resultUrl => {
                //     ////console.log('我在获取url',resultUrl)
                //     this.pdfSrc = resultUrl
                // })




                // ////console.log(previewPdf.pdfUrl)
                // this.pdfSrc = previewPdf.pdfUrl
                return
                // 使用pdf-lib加载PDF文档
                const pdfBytes = new Uint8Array(data);
                ////console.log('1')
                const pdfDoc = await PDFDocument.load(pdfBytes);
                ////console.log('2')
                // 获取页面并添加水印
                const pages = pdfDoc.getPages();
                ////console.log('3')
                for (const page of pages) {
                    ////console.log('4')
                const { width, height } = page.getSize();
                const watermarkText = 'My Watermark';
                const font = await pdfDoc.embedFont(StandardFonts.Helvetica)
                ////console.log('5')
                ////console.log('StandardFonts.Helvetica999',await pdfDoc.embedFont(StandardFonts.Helvetica))
                ////console.log('StandardFonts.Helvetica888',StandardFonts.Helvetica)
                page.drawText(watermarkText, {
                    x: width / 2,
                    y: height / 2,
                    size: 40,
                    font: font,
                    color: rgb(0, 0, 0),
                    opacity: 1,
                    align: 'center',
                });
                }
                ////console.log('6')
                // 保存修改后的PDF为Blob
                const pdf = await pdfDoc.save();
                const blob = new Blob([pdf], { type: 'application/pdf' });

                // 转换为URL以便在iframe中预览
                this.pdfSrc = URL.createObjectURL(blob);
                ////console.log('当前文件是什么？？',this.pdfSrc)
            } catch (error) {
                //console.log('我获取到了什么文件流？4')
                if(positionParams == 'left'){
                    this.leftIframeSpinning = false
                }else if(positionParams == 'right'){
                    this.rightIframeSpinning = false
                }
                ////console.log('Error fetching or adding watermark:', error);
            }
        },
        previewPdfConstructor({ blob, docTitle, isAddWatermark = false, watermark: { type = 'text', text = 'WFT', image } },positionParams){
            try {
                ////console.log('我在文件传值这里positionParams4',positionParams)
                const _self = this
                if(!blob) {
                    if(positionParams == 'left'){
                        this.leftIframeSpinning = false
                    }else if(positionParams == 'right'){
                        this.rightIframeSpinning = false
                    }
                    return //console.error('[PDF Blob Is a required parameter]')
                }
                if(!isAddWatermark) { // 不添加水印
                    if(positionParams == 'left'){
                        _self.preView(blob, docTitle)
                    }else if(positionParams == 'right'){
                        
                        _self.preRightView(blob, docTitle)
                    }
                
                } else {
                let bytes,imageType
                if(type == 'image') {
                    if(!image) {
                    return //console.error('["image" Is a required parameter]')
                    }
                    bytes = image.bytes
                    imageType = image.imageType
                }
                const map = {
                    // 'text': _self.addTextWatermark.bind(_self),
                    // 'image': _self.addImageWatermark.bind(_self),
                    'canvas': _self.addCanvasWatermark.bind(_self)
                }
                ////console.log('什么类型',_self)
                ////console.log('什么类型',blob.arrayBuffer)
                //   blob.arrayBuffer().then(async buffer => {
                    // const existingPdfBytes = buffer
                    const pdfDoc =  PDFDocument.load(blob)
                    let params
                    if(type == 'text') params = { blob, pdfDoc, text, docTitle }
                    if(type == 'image') params = { blob, pdfDoc, bytes, imageType, docTitle }
                    if(type == 'canvas') params = { blob, pdfDoc, text, docTitle }
                    this.resultUrl = map[type](params,positionParams)
                    ////console.log('什么类型',map['text'])
                    ////console.log('什么类型',map[type](params))
                    ////console.log('什么类型2',this.resultUrl)
                //   }).catch(e => //console.error('[Preview Pdf Error]:', e))
                }
            } catch (error) {
                if(positionParams == 'left'){
                    this.leftIframeSpinning = false
                }else if(positionParams == 'right'){
                    this.rightIframeSpinning = false
                }
                ////console.log('Error fetching or adding watermark:', error);
            }
        },
        // 添加 canvas 水印-------暂时没有返回值
        async addCanvasWatermark({ blob, pdfDoc1, text, docTitle },positionParams) {
            try {
                const pdfDoc =  await PDFDocument.load(blob)
                // 旋转角度大小
                // const rotateAngle = Math.PI / 6;
                const rotateAngle = Math.PI / 4;
            
                // labels是要显示的水印文字，垂直排列
                let labels = new Array();
                labels.push(text);
            
                const pages = pdfDoc.getPages()
            
                const size = pages[0].getSize()
            
                let pageWidth = size.width
                let pageHeight = size.height

                ////console.log('画布的宽高，',size.width,'-',size.height)
                let canvas = document.createElement('canvas');
                let canvasWidth = canvas.width = pageWidth;
                let canvasHeight = canvas.height = pageHeight;
            
                const context = canvas.getContext('2d');
                context.font = "15px Arial";
            
                // 先平移到画布中心
                context.translate(pageWidth / 2, pageHeight / 2 - 250);
                // 在绕画布逆方向旋转30度
                context.rotate(-rotateAngle);
                // 在还原画布的坐标中心
                context.translate(-pageWidth / 2, -pageHeight / 2);
            
                // 获取文本的最大长度
                let textWidth = Math.max(...labels.map(item => context.measureText(item).width));
            
                let lineHeight = 15, fontHeight = 12, positionY, i
                i = 0, positionY = 0
                while (positionY <= pageHeight) {
                positionY = positionY + lineHeight * 5
                i++
                }
                canvasWidth += Math.sin(rotateAngle) * (positionY + i * fontHeight) // 给canvas加上画布向左偏移的最大距离
                ////console.log('给canvas加上画布向左偏移的最大距离',Math.sin(rotateAngle) * (positionY + i * fontHeight))
                canvasHeight = 2 * canvasHeight
                for (positionY = 0, i = 0; positionY <= canvasHeight; positionY = positionY + lineHeight * 5) {
                // 进行画布偏移是为了让画布旋转之后水印能够左对齐;
                context.translate(-(Math.sin(rotateAngle) * (positionY + i * fontHeight)), 0);
                for (let positionX = 0; positionX < canvasWidth; positionX += 1.5 * textWidth) {
                    let spacing = 0;
                    labels.forEach(item => {
                    context.fillText(item, positionX, positionY + spacing);        
                    context.fillStyle = 'rgba(0, 0, 0, .2)'; // 字体颜色
                    spacing = spacing + lineHeight;
                    })
                }
                context.translate(Math.sin(rotateAngle) * (positionY + i * fontHeight), 0);
                context.restore();
                i++
                }
                // 图片的base64编码路径
                let dataUrl = canvas.toDataURL('image/png');
                // 使用Xhr请求获取图片Blob
                let xhr = new XMLHttpRequest();
                xhr.open("get", dataUrl, true);
                xhr.responseType = "blob";
                xhr.onload = res => {
                const imgBlob = res.target.response
                // 获取Blob图片Buffer
                imgBlob.arrayBuffer().then(async buffer => {
                    const pngImage = await pdfDoc.embedPng(buffer)
                    for(let i = 0; i < pages.length; i++) {
                    pages[i].drawImage(pngImage)
                    }
                    // 序列化为字节
                    const pdfBytes = await pdfDoc.save()
                    ////console.log('我在文件传值这里positionParams5',positionParams)
                    if(positionParams == 'left'){
                        this.preView(pdfBytes, docTitle, positionParams)
                    }else if(positionParams == 'right'){
                        this.preRightView(pdfBytes, docTitle, positionParams)
                    }
                })
                }
                xhr.send();
            } catch (error) {
                if(positionParams == 'left'){
                    this.leftIframeSpinning = false
                }else if(positionParams == 'right'){
                    this.rightIframeSpinning = false
                }
                ////console.log('Error fetching or adding watermark:', error);
            }
        },
        preView(stream, docTitle) {
            this.leftIframeSpinning = false
            const blob = new Blob([stream], { type: 'application/pdf' });
            this.pdfSrc =  URL.createObjectURL(blob);
            this.changeListData()//刷新为已读
            this.$emit('modifySuccess')
            
        },
        preRightView(stream, docTitle){
            this.rightIframeSpinning = false
            const blob = new Blob([stream], { type: 'application/pdf' });
            this.rightPdfSrc =  URL.createObjectURL(blob);
            ////console.log('最终结果',this.rightPdfSrc)
            this.changeListData()//刷新为已读
            this.$emit('modifySuccess')
        },
        
    }
}
</script>
<style lang="less">
//1
.materialReview-materialComparison-box{
    width: 100%;
    padding: 2px 5px 5px 5px;
    overflow-y: auto;
    background-color: #fff;
    display: flex;
    //left
    .materialComparison-left{
        width: 50%;
        display: flex;
        .left-directory-list-box{
            width: 30%;
            height: calc(100vh - 140px);
            overflow: auto;
        }
        .right-preview-box{
            flex: 1;
            height: calc(100vh - 137px);
            overflow-y: auto;
            overflow-x: hidden;
        }
    }
    //
    .directory-list-fmlmc{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 10px;
        font-weight: 600;
    }
    .file-for-v-box-t{
        border: 1px solid #d9d9d9;
        border-radius: 15px;
        padding: 5px;
    }
    .itemIndexTremTindex-select-box{
        // background: #38f;
        // a{
        //     color: #fff !important;
        // }
        background-image: linear-gradient(to bottom, #e7f3ff, #fff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff);
        background-size: 100% 100% !important;
        border: 2px solid #ff9200;
    }
    .tips-text-v{
        padding: 0 3px;
        color: #fff;
        border-radius: 3px;
    }
    .directory-text-bz{
        background-color: #ff9200;
        display: inline-block;
        margin-right: 3px;
    }
    .directory-text-yd{
        background-color: #18d118;
        margin-right: 3px;
    }
    .directory-text-wd{
        background-color: red;
        margin-right: 3px;
    }
    //

    //right
    .materialComparison-right{
        width: 50%;
        // display: flex;
        .materialComparison-content-box{
            display: flex;
            border: 1px solid #38f;
            border-top: none;
            padding: 5px;
            .ant-spin-nested-loading{
                width: 100%;
            }
        }
        .left-preview-box{
            flex: 1;
            height: calc(100vh - 172px);
            overflow-y: auto;
            overflow-x: hidden;
        }
        .right-directory-list-box{
            width: 30%;
            height: calc(100vh - 185px);
            overflow: auto;
        }
    }
    // .material-review-tabs{
    //     // width: 100%;
    //     padding: 0 5px;
    //     background-color: #fff;
    //     position: relative;
    //     // top: 48px;
    //     top: 0;
    //     right: 0;
    //     // margin:0 10px;
    //     font-size: 20px !important;
    //     font-weight: 600 !important;
    //     .ant-tabs-bar{
    //         margin: 0;
    //     }
    //     .ant-tabs-nav .ant-tabs-tab{
    //         padding-top: 5px;
    //         padding-bottom: 5px;
    //         margin-right: 10px;
    //     }
    //     .ant-tabs-nav-container{
    //         height: 50px !important;
    //     }
    //     .ant-tabs-nav-scroll{
    //         padding-top: 10px;
    //         padding-left: 10px;
    //     }
    // }
    // .ant-tabs-tab-active{
    //     font-size: 16px;
    //     font-weight: 600 !important;
    // }
    // .ant-tabs-tab{
    //     font-size: 16px;
    //     font-weight: 600 !important;
    //     line-height: 28px !important;
    //     border-radius: 10px 10px 0 0 !important;
    // }
    // .ant-tabs-tab-active{
    //     background-color: #5ca3e5 !important;
    //     color: #fff !important;
    //     border-color: #5ca3e5 !important;
    //     box-shadow: 0px 0px 12px 0px #5ca3e5;
    // }
    // .material-review-content{
    //     margin-top: 10px;
    //     height: calc(100vh - 136px);
    //     overflow-y: auto;
        
    // }
}
//2
.material-review-examination{
    .review-table{
        padding-bottom: 3px;
        th{
            text-align: center;
            padding: 10px;
        }
        td{
            padding: 10px;
        }
    }
    .file-list-v-examination{
        .file-for-box{
            display: flex;
            flex-wrap: wrap;
        }
        .file-for-v{
            border-radius: 2px;
            border: 1px solid #d9d9d9;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items:center;
            padding: 5px;
            margin: 5px;
            .file-icon-box{
                margin-right:5px;
                display: flex;
                justify-content: space-evenly;
                .file-icon-v{
                    font-size: 42px;
                    color: rgb(24, 144, 255);
                    padding: 7px;
                }
                // .left-box{
                //     width: 28px;
                // }
                .right-box{
                    display: flex;
                    // flex-direction: column;
                    justify-content: space-evenly;
                    align-items: center;
                    padding-bottom: 2px;
                    width:35px;
                    
                }
                
            }
            .eye-icon-v{
                display:inline-block;
                padding-left: 30px;
                font-size: 18px;
                color: #1ab394;
            }
            .name-fclmc-text{
                // height: 60px;
                text-align: center;
                display:block;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                // display: flex;
                // flex-direction: column;
                // justify-content: center;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                -webkit-box-orient: vertical;
                font-size: 14px;
            }
        }
        
    }
    
}
.processing-content-right-v{
    margin-left: 150px;
    background-color: #fff;
}
</style>